<div class="panel panel-default">
<div class="row">
	<div class="col-sm-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Connection</h3>
			</div>
			<div class="panel-body">

				<form role="form">

                    <div class="row">
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="host">Host:</label> <input type="text"
                            class="form-control" id="host" placeholder="Host IP"
                            v-model="cInfo.host" />
                    </div>
                    </div>
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="port">Port:</label> <input type="text"
                            class="form-control" id="port"
                            placeholder="Port" v-model="cInfo.port" />
                    </div>
                    </div>
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="client_id">Client ID:</label> <input type="text"
                            class="form-control" id="client_id"
                            placeholder="Client ID" v-model="cInfo.clientId" />
                    </div>
                    </div>
                    
                    </div>
                    
                    <div class="row">
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="user_name">User Name:</label> <input type="text"
                            class="form-control" id="user_name"
                            placeholder="User Name" v-model="cInfo.userName" />
                    </div>
                    </div>
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="password">Password:</label> <input type="password"
                            class="form-control" id="password"
                            placeholder="Password" v-model="cInfo.password" />
                    </div>
                    </div>
                    
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label for="keep_alive">Keep Alive:</label> <input type="text"
                            class="form-control" id="keep_alive"
                            placeholder="Keep Alive" v-model="cInfo.keepAlive" />
                    </div>
                    </div>
                    
                    <div class="col-sm-12">
                    <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="1" id="clean_session"  v-model="cInfo.cleanSession" checked/>Clean Session 
                    </label>
                    </div>
                    </div>

                    <div class="col-sm-12">
                    <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="1" id="use_ssl" v-model="cInfo.useSSL" @change="sslPort"/>SSL 
                    </label>
                    </div>
                    </div>
                    
                    </div>
                    
                    <div class="row">
                    
                    <div class="col-sm-12">
                    <div class="form-group">
                        <template v-if="connState == false">
                        <button type="button" class="btn btn-success btn-single" id="connect_btn" @click="connect">Connect</button>
                        <button type="button" class="btn btn-gray btn-single disabled" id="disconnect_btn">Disconnect</button>
                        </template>
                        <template v-else>
                        <button type="button" class="btn btn-gray btn-single disabled" id="connect_btn">Connect</button>
                        <button type="button" class="btn btn-success btn-single" id="disconnect_btn" @click="disconnect">Disconnect</button>
                        </template>
                    </div>
                    <div class="form-group">
                        <label class="cbr-inline">Current State: 
                            <template v-if="connState == false">
                            <strong id="connect_state" class="text-danger">DISCONNECTED</strong>
                            </template>
                            <template v-else>
                            <strong id="connect_state" class="text-success">CONNECTED</strong>
                            </template>
                        </label>
                    </div>
                    </div>
                    
                    </div>

				</form>

			</div>
		</div>
	</div>
	
	<div class="col-sm-6">
	
	   <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Receive Message</h3>
            </div>
            <div class="panel-body" style="overflow: auto;max-height: 300px;">
                <div v-for="message in receiveMsgs | reverse">
                    <cite>{{ message.arrived_at}}</cite>
                    --(Q{{message.qos}},
                    <template v-if="message.retained">R1</template><template v-else>R0</template>, 
                    <template v-if="message.duplicate">D1</template><template v-else>D0</template>, 
                    Topic={{message.destinationName}}, Payload={{message.msgString}})
                </div>
            </div>
        </div>
	
	</div>
</div>
</div>

<div class="panel panel-default">
<div class="row">
    <div class="col-sm-6">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Subscription</h3>
            </div>
            <div class="panel-body">

                <form role="form">

                    <div class="row">
                    
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label for="subscription">Subscription:</label>
                        <input type="text"
                            class="form-control"
                            placeholder="Subscription" value="world" v-model="subInfo.topic">
                    </div>
                    </div>
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label for="qos_2">QoS:</label>
                        <select class="form-control" id="qos_2" v-model="subInfo.qos">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                    </div>
                    
                    </div>
                    
                    <div class="row">
                    
                    <div class="col-sm-12">
                    <div class="form-group">
                        <button type="button" class="btn btn-success btn-single" @click="sub">Subscribe</button>
                        <button type="button" class="btn btn-success btn-single" @click="unsub">Unsubscribe</button>
                    </div>
                    </div>
                    
                    </div>

                </form>

            </div>
        </div>
    </div>
    
    <div class="col-sm-6">
    
    <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Subscriptions List</h3>
            </div>
            <div class="panel-body" style="overflow: auto;max-height: 200px;">
                <div v-for="sub in subscriptions"><cite>{{ sub.time }}</cite>( QoS: {{ sub.qos }} ) -- {{ sub.topic }}</div>
            </div>
        </div>
    
    </div>




</div>
</div>

<div class="panel panel-default">
<div class="row">
    <div class="col-sm-6">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Send Message</h3>
            </div>
            <div class="panel-body">

                <form role="form">

                    <div class="row">
                    
                    <div class="col-sm-12">
                    <div class="form-group">
                        <label for="topic">Topic:</label> <input type="text"
                            class="form-control" id="topic"
                            placeholder="Topic" value="world" v-model="sendInfo.topic">
                    </div>
                    </div>
                    
                    </div>
                    
                    <div class="row">
                    
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label for="message">Message:</label> <input type="text"
                            class="form-control" id="message"
                            placeholder="Message" value="Hello world!" v-model="sendInfo.text" />
                    </div>
                    </div>
                    <div class="col-sm-6">
                    <div class="form-group">
                        <label for="qos_3">QoS:</label>
                        <select class="form-control" id="qos_3" v-model="sendInfo.qos">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                    </div>
                    </div>
                    <div class="col-sm-12">
                    <div class="form-group">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="1" id="retained" v-model="sendInfo.retained" checked/>Retained 
                    </label>
                    </div>
                    </div>
                    
                    </div>
                    
                    <div class="row">
                    
                    <div class="col-sm-12">
                    <div class="form-group">
                        <button type="button" class="btn btn-success btn-single" @click="send">Send</button>
                    </div>
                    </div>
                    
                    </div>

                </form>

            </div>
        </div>
    </div>
    
    <div class="col-sm-6">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Send Message List</h3>
            </div>
            <div class="panel-body" style="overflow: auto;max-height: 230px;">
                <div v-for="message in sendMsgs"><cite>{{ message.time }}</cite>( QoS: {{ message.qos }}, Retained: {{ message.retained }} ) -- {{ message.text }}</div>
            </div>
        </div>
    </div>
</div>
</div>
